<!--
 * @Author: ZRX
 * @Date: 2024-01-17 16:58:38
 * @LastEditors: sueRimn
 * @LastEditTime: 2024-01-18 13:23:59
 * @Descripttion: 
 * @version: 
-->
<template>
    <div class="hr das"></div>
  
    <h4 class="title_lv2">Message 消息提示</h4>
    <div class="statement">
      <ol>
        <li>提type示类型：success、warning、message、error</li>
      </ol>
    </div>
  
    <div>
      <el-button type="success" :plain="true" @click="open2">successMsg </el-button>
      <el-button type="warning" :plain="true" @click="open3">warnMsg</el-button>
      <el-button type="default" :plain="true" @click="open1">infoMsg</el-button>
      <el-button type="danger" :plain="true" @click="open4">failMsg</el-button>
    </div>
  
    <!-- 页面代码 源码 -->
    <dropWrap key="ffs">
      <pre><code class="language-js">{{ tost }} </code></pre>
    </dropWrap>
    
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, nextTick } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { demoProps } from "@/stores/modules/merakDemo";
  import {
    infoMsg,
    successMsg,
    failMsg,
    warnMsg,
    confirmWarningMsg,
    confirmSuccessMsg,
    confirmDangerMsg,
    moreConfirm,
    delConfimMsg,
    htmlMsg
  } from "@/utils/messageUtils";
  
  import Prism from "prismjs";
  import "../../prism.css";
  
  import dropWrap from "../../dropWrap.vue";
  /* 响应式变量 */
  
  const demoProp = demoProps();
  
  //变量 htm 用于存放 组件源码 code 
  
  let tost = ref<string>(` 
    //可传参为：不传即为默认值
        interface baseMsg {
        title?: string;//提示标题
        msg: string;//提示信息
        showClose?: boolean;
        num?: number; //点击次数
        confirmTxt?: string; //确认文本
        cancelTxt?: string; //取消文本
        callback?: any;//返回方法
      }
  
  
  
    import {
    infoMsg,
    successMsg,
    failMsg,
    warnMsg
  } from "@/utils/messageUtils";
   // Message提示  infoMsg successMsg failMsg warnMsg
   //无返回值可以直接使用
      warnMsg(demoProp.title);
   //有返回值可传参
      infoMsg({
          msg: demoProp.title,
          showClose: true,
          callback: () => {
            console.log("关闭");
          }
        });
  
      `);
  
  /* 
      生命周期
      */
  onMounted(() => {
    nextTick(() => {
      Prism.highlightAll();
    });
  });
  
  /* methods */
  
  const open1 = () => {
    // ElMessage(demoProp.title);
    infoMsg({
      msg: demoProp.title,
      showClose: true,
      callback: () => {
        console.log("关闭");
      }
    });
  };
  const open2 = () => {
    successMsg({ msg: demoProp.title });
    // ElMessage({
    //   message: demoProp.title,
    //   type: "success"
    // });
  };
  const open3 = () => {
    warnMsg(demoProp.title);
    // ElMessage({
    //   message: demoProp.title,
    //   type: "warning"
    // });
  };
  
  const open4 = () => {
    failMsg(demoProp.title);
    // ElMessage({
    //   message: demoProp.title,
    //   type: "error"
    // });
  };
  

  
  </script>
  <style lang="scss" scoped>
  .el-row::v-deep {
    margin-bottom: 20px;
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .impTxt{
    color: var(--el-color-primary);
    padding: 0 5px;
  }
  </style>
  